
import React, { Component } from "react";
import "../../asserts/styles/todoList/items.scss";
import { CloseOutlined, CheckOutlined, RollbackOutlined } from '@ant-design/icons';


class Items extends Component {
  render() {
    let { todos } = this.props;
    return (
      <div className="list">
        <ul className="list-group">
          {todos.map((item, index) => (
            <li
              style={{
                textDecoration: item.status === "finished" ? "line-through" : "none",
                color:item.status === "finished"? "rgba(0, 0, 0, 0.2)" : "rgba(0, 0, 0, 0.65)"
              }}
              className="list-group-item"
              key={index}
            >
              <span className="flex-item">{item.value}</span>
              <i>
                <CloseOutlined
                  className="glyphicon glyphicon-remove"
                  onClick={() => this.props.deleteItem(index)}
                />
              </i>
              <i>
                {
                  item.status === "finished" ? (
                    <RollbackOutlined
                      className="glyphicon glyphicon-share-alt"
                      onClick={() => this.props.withdraw(index)}
                    />
                  ):(
                    <CheckOutlined
                      className="glyphicon glyphicon-ok"
                      onClick={() =>this.props.finishItem(index)}
                    />
                  )
                }
              </i>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default Items;
